@import "../../../style/index.less";

@title-bg-color: @color_grey_600;
@create-icon-color: @color_grey_700;
@create-icon-hover-color: @color_info;
@no-data-desc-color: @color_font_700;
@content-bg-color: @color_info_100;
@content-delete-icon-color: @color_font_700;
@content-delete-icon-hover-color: @color_delete;

.halo-com-related-sources {
  position: relative;
  width: 526px;
  padding-left: 16px;
  .related-sources-title {
    position: relative;
    height: 14px;
    margin: 12px 0;
    &:before {
      content: "";
      left: 0;
      right: 24px;
      top: 50%;
      margin-top: -1px;
      height: 1px;
      background-color: @title-bg-color;
      display: block;
      position: absolute;
    }
    div {
      position: absolute;
      top: 0;
      left: 0;
      display: inline-block;
      padding-right: 12px;
      background-color: #fff;
      z-index: 2;
      height: 14px;
      line-height: 14px;
      }
    i.create-action {
      color: @create-icon-color;
      float: right;
      cursor: pointer;
      &:hover {
        color: @create-icon-hover-color;
      }
    }
  }
  .content-no-data {
    height: 14px;
    padding: 8px;
    color: @no-data-desc-color;
  }
  .related-sources-content {
    margin-right: 24px;
    .content-item {
      padding: 8px;
      &:hover {
        background-color: @content-bg-color;
        i.delete {
          color: @content-delete-icon-color;
          &:hover {
            color: @content-delete-icon-hover-color;
          }
        }
      }
      > div {
        display: inline-block;
      }
      i {
        margin-right: 4px;
        &.delete {
          float: right;
          color: transparent;
          cursor: pointer;
        }
      }
    }
    .content-item-list {
      padding: 8px;
      .item-key {
        display: inline-block;
        width: 94px;
        padding: 5px 0;
        color: #626f7e;
        font-weight: normal;
        vertical-align: top;
        text-align: right;
        word-break: break-all;
      }
      .item-data {
        display: inline-block;
        max-width: 360px;
        vertical-align: middle;
        padding: 5px 0 5px 24px;
        word-wrap: break-word;
      }
    }
    .table-mini {
      .table-body {
        .row {
          i.delete {
            display: none;
          }
          &:hover {
            i.delete {
              display: inline-block;
              color: @content-delete-icon-color;
              cursor: pointer;
              &:hover {
                color: @content-delete-icon-hover-color;
              }
            }
          }
        }
      }
    }
  }
}